import React, { useState, useRef, useEffect, } from 'react'
import {
    Toast, NavBar, Search, Sidebar, ProductCard, Swiper, Button,
    PullRefresh, List, Tabs, Cell, Collapse, Popup, Grid
} from 'react-vant';
import type { ListInstance } from 'react-vant';
import { WeappNav, StarO, Add } from '@react-vant/icons';
import { STORETYPE, INDEXTAB } from '../../Type/Store.d';
import { useDispatch, useSelector } from 'react-redux';
import axios from '../../Utils/Request';
import { ALLLIST, PROPSTYPE, SHOPLIST, TYPELIST } from '../../Type/Store.d';
import '../../Api/DataList';
import { useNavigate, } from 'react-router-dom';

function Classify() {
    const Dispatch = useDispatch();
    const Navigate = useNavigate();
    const [active, setActive] = useState(0);
    const list = useSelector((state: STORETYPE) => state.list);
    const childrenList = useSelector((state: STORETYPE) => state.childrenList) as PROPSTYPE[];
    // let obj = childrenList.slice(0,6);
    // console.log(obj,'---obj');

    const [NewChildrenList, setNewChildrenList] = useState<PROPSTYPE[]>(childrenList.slice(0, 6));// 截取后的数据
    // console.log(NewChildrenList,'---NewChildrenList');

    const [Page, setPage] = useState(1);  // 当前页
    const [isLoad, setisLoad] = useState(false);   // 判断进入页面是否一直加载

    const listRef = useRef<ListInstance>(null);
    const [finished, setFinished] = useState<boolean>(false);  // 加载完成状态


    useEffect(() => {
        axios.get('/list').then(res => {
            Dispatch({
                type: ALLLIST,
                payload: res.data.list
            })
        })

        // setNewChildrenList(childrenList.slice(0,6*Page))
    }, [])


    // 上拉
    const onLoadRefresh = () => {
        setisLoad(true);
        setTimeout(() => {
            setPage(Page + 1);
            setNewChildrenList(childrenList.slice(0, Page * 6));
            if (NewChildrenList.length >= 40 && Page > Math.ceil(childrenList.length / 6)) {
                setFinished(true)
            }
            setisLoad(false);
        }, 2000);

    };
    // 刷新
    const onRefresh = async () => {
        setFinished(false);
        setPage(1);
        setNewChildrenList(childrenList.slice(0, Page * 6))

    };

    const typelist = ['好吃推荐', '时令上新', '会员专区', '鲜花绿植', '热带水果'];

    const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
    const items = colors.map((color, index) => (
        <Swiper.Item key={color}>{index + 1}</Swiper.Item>
    ));
    console.log(NewChildrenList, 'NewChildrenList')
    return (
        <div className='Classify'>
            <NavBar title="分类" rightText={<WeappNav />} />
            <Search placeholder="请输入搜索关键词" onClickInput={() => Navigate('/Search')} />
            <main>
                <Sidebar value={active}
                    onChange={(v) => {
                        setActive(v);
                        Dispatch({
                            type: INDEXTAB,
                            payload: v
                        })
                        setPage(1);
                        setNewChildrenList(childrenList.slice(0, 6));
                    }}
                >
                    {
                        list.map((item, index) => {
                            return <Sidebar.Item title={item.txt} key={index}>
                                <div className="demo-swiper">
                                    <Swiper autoplay={2000} loop={true}>{items}</Swiper>
                                </div>
                                <Collapse initExpanded="3" accordion >
                                    <Collapse.Item title="全部分类" name="3">
                                        <Grid columnNum={3}>
                                            {typelist.map((item, index) => (
                                                <Grid.Item key={index} text={item} onClick={() => {
                                                    Dispatch({
                                                        type: TYPELIST,
                                                        payload: item
                                                    })
                                                    setNewChildrenList(childrenList.slice(0, Page * 6))
                                                }} />
                                            ))}
                                        </Grid>
                                    </Collapse.Item>
                                </Collapse>
                                <PullRefresh onRefresh={onRefresh} >
                                    <List ref={listRef} loading={isLoad} finished={finished} onLoad={onLoadRefresh}>
                                        {
                                            NewChildrenList && NewChildrenList.length > 0 ? NewChildrenList.map((v, i) => {
                                                return <ProductCard key={i}
                                                    price={v.price}
                                                    desc={v.con}
                                                    title={v.txt}
                                                    thumb={v.src}
                                                    footer={<> {v.type} &emsp;<Add fontSize={20} color='red' onClick={(e) => {
                                                        e.stopPropagation();
                                                        Dispatch({
                                                            type: SHOPLIST,
                                                            payload: v
                                                        })
                                                        Toast('加入成功')
                                                    }} /></>}
                                                    onClick={() => Navigate('/Detail/' + v.id, { state: v })}
                                                />
                                            }) : '暂无数据'
                                        }
                                    </List>
                                </PullRefresh>
                            </Sidebar.Item>
                        })
                    }
                </Sidebar>
            </main>
        </div>
    )
}

export default Classify